<script lang="ts" setup>
import { onMounted, ref, type Ref } from "vue";
import Nav_bottom from "@/componets/nav/nav_bottom";
import { goActviceDe } from "@/util/go";
import {baseUrl} from "@/api/http"
import {getActiveList, type ActiveVo, type Query} from "@/api/active";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";

const searchText = ref("");
const isLoading = ref(false);
const isRefreshing = ref(false);
const page = ref(1);

const query :Ref<Query> = ref({
	title: "",
	startDate: "",
	deadlineDate: "",
	addr: "",
	pageNum: 1,
	pageSize: 10
})

const handleSearch = () => {
	query.value.pageNum = 1
	list.value = []
	getList()
  // 实现搜索逻辑
};
const clearSearch = () => {
  searchText.value = "";
};


const loadMore = async () => {
  if (isLoading.value) return;
  isLoading.value = true;
  // 模拟加载更多数据
  getList()
  isLoading.value = false;
};


const onRefresh = async () => {
  isRefreshing.value = true;
  // 模拟刷新数据
  await new Promise((resolve) => setTimeout(resolve, 1000));
  page.value = 1;
  isRefreshing.value = false;
};


const viewActivity = (activity: ActiveVo) => {
  goActviceDe(activity.id)
};

const handleStoreActivity = () => {
  uni.showToast({
    title: "查看店内活动",
    icon: "none",
  });
};

const list:Ref<ActiveVo[]> = ref([])
// 分享给朋友
  onShareAppMessage(() => ({
    title: '如初国风馆',
    path: '/pages/index/index', // 替换为你的页面路径
    imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  // 分享到朋友圈
  onShareTimeline(() => ({
  	  title: '如初国风馆',
  	  path: '/pages/index/index', // 替换为你的页面路径
  	  imageUrl: 'https://only114514.oss-cn-hangzhou.aliyuncs.com/ruchu/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250606204232.jpg' // 可选：分享图片
  }))
  
const getList = () => {
	getActiveList(query.value).then(res => {
		let data = res.data.data.data.records as Array<ActiveVo>
		list.value.push(...data)
		query.value.pageNum++
	})
}
getList()


</script>

<template>
  <view class="container">
    <!-- 搜索区域 -->
	<view class="header">
	  <view class="title-bar">
	    <text class="title">活动</text>
	  </view>
	</view>
    <view class="search-container">
      <view class="search-wrapper">
        <view class="search-box">
          <uni-icons type="search" size="20" color="#666"></uni-icons>
          <input
            v-model="query.title"
            class="search-input"
            type="text"
            placeholder="搜索活动"
          />
          <uni-icons
            v-if="searchText"
            type="clear"
            size="20"
            color="#666"
            @click="clearSearch"
            class="cursor-pointer"
          ></uni-icons>
        </view>
        <view class="store-activity-btn" @click="handleSearch">
          <text>搜索</text>
        </view>
      </view>
    </view>
    
	<view class="empty-state" v-if="list.length === 0">
	  <uni-icons type="info" size="48" color="#7fbfb0" />
	  <text class="empty-text">暂无相关活动</text>
	  <text class="empty-subtext">敬请期待</text>
	</view>
	
	<!-- 活动列表区域 -->
    <scroll-view
      class="activity-list"
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <view
        class="activity-card cursor-pointer"
        v-for="(item, index) in list"
        :key="index"
        @click="viewActivity(item)"
      >
        <image class="activity-image" :src="baseUrl + item.headImg[0].url" mode="widthFix"></image>
        <view class="activity-info">
          <text class="activity-title">{{ item.title }}</text>
          <view class="activity-detail">
            <uni-icons type="calendar" size="16" color="#666"></uni-icons>
            <text class="detail-text">{{ item.activeStartTime }} 至 {{ item.activeDeadline }}</text>
          </view>
          <view class="activity-detail">
            <uni-icons type="location" size="16" color="#666"></uni-icons>
            <text class="detail-text">{{ item.activeAddr }}</text>
          </view>
        </view>
      </view>
      <!-- 加载状态 -->
      <view class="loading-container" v-if="isLoading">
        <uni-icons type="spinner-cycle" size="24" color="#666"></uni-icons>
        <text class="loading-text">加载中...</text>
      </view>
    </scroll-view>
	<nav_bottom :index="4"></nav_bottom>
  </view>
</template>

<style scoped lang="scss">

.empty-state {
  .empty-text {
    font-size: 16px;
    color: #333;
    margin-top: 10rpx;
  }
  .empty-subtext {
    font-size: 14px;
    color: #999;
    margin-top: 5rpx;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  text-align: center;
  color: #999;
  font-size: 14px;
  background-color: white;
  width: 90%;
  margin: 50px auto;
  border-radius: 15rpx;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05)
}
	
.container {
  padding-top: 90rpx;
  padding-bottom: 90rpx;
  height: 120%;
  height: 83vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.header {
  padding: 20rpx;
  background-color: #ffffff;
}
.title-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.search-container {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.search-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 36rpx;
  padding: 16rpx 24rpx;
}
.store-activity-btn {
  padding: 16rpx 32rpx;
  background-color: #007aff;
  border-radius: 36rpx;
}
.store-activity-btn text {
  color: #ffffff;
  font-size: 14px;
  white-space: nowrap;
}
.search-input {
  flex: 1;
  margin-left: 16rpx;
  font-size: 14px;
}
.activity-list {
  flex: 1;
  width: 95%;
  overflow: auto;
  padding: 20rpx;
}
.activity-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.activity-image {
  width: 100%;
  max-height: 338rpx;
}
.activity-info {
  padding: 24rpx;
}
.activity-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16rpx;
}
.activity-detail {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}
.detail-text {
  font-size: 14px;
  color: #666666;
  margin-left: 8rpx;
}
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}
.loading-text {
  font-size: 14px;
  color: #666666;
  margin-left: 12rpx;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
